Code Snippets

MBD DEV offers free HTML, CSS and Javascript code snippets

Our code snippets are small pices of code made to enhance your website. By adding small features like Dark Mode can make a big difrence.

Here is a small list of some code snippets we have

• Side Navbar
• Adding Icons
• Dark Mode Toggle
• Favicon
• Columns

Geting Strated

Dark Mode Toggle

Adding a dark mode toggle to your webiste is basically a standard by now, one of the things every website needs to have.

Light Mode

Dark Mode

HTML

<div class="topnav">
  <a onclick="myFunction1()" id="myBtn" title="Dark Mode"><i class="fa-solid fa-circle-half-stroke"></i>Dark Mode Toggle</a>
</div>

CSS

The code for the Navbar where the button is placed.

.topnav {
  overflow: hidden;
  background-color: #4d79ff;
  position: sticky;
  top: 0;
}

.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

Javascript

The code for the Navbar where the button is placed.

function myFunction() {
   var element = document.body;
   element.classList.toggle("dark-mode");
}